<template>
  <el-container>
    <div style="padding: 10px; padding-bottom: 0">
      <div class="report_header" ref="headerHeight">
        <div style="display: flex; align-items: center">
          <div class="report_header_left"></div>
          <div style="width: 800px; display: flex; align-items: center">
            <div class="report_header_date">
              <el-date-picker
                v-model="query.date"
                value-format="yyyy-MM-dd"
                type="daterange"
                align="right"
                unlink-panels
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                :picker-options="pickerOptions"
              >
              </el-date-picker>
            </div>
            <div class="report_header_query">
              <el-select
                v-model="memberName"
                value-key="id"
                clearable
                placeholder="请选择客户"
                filterable
                @focus="getMemberList"
                @change="selectMember"
                :filter-method="queryMember"
                style="width: 100%"
              >
                <el-option
                  v-for="item in memberIdOptions"
                  style="width: 600px"
                  :key="item.id"
                  :label="item.name"
                  :value="item"
                >
                  <div style="display: flex">
                    <span style="width: 60px">{{ item.code }}</span>
                    <span
                      style="
                        float: left;
                        width: 100px;
                        overflow: hidden;
                        text-overflow: ellipsis;
                      "
                      >{{ item.name }}</span
                    >
                    <span
                      style="
                        float: right;
                        color: #8492a6;
                        font-size: 8px;
                        width: 80px;
                        margin-left: 10px;
                      "
                      >{{ item.mobile }}</span
                    >
                    <div style="width: 200px">
                      <span style="color: #8492a6; font-size: 8px">{{
                        item.address
                      }}</span>
                    </div>
                  </div>
                </el-option>
                <div
                  style="
                    display: flex;
                    width: 100%;
                    position: absolute;
                    bottom: 0;
                  "
                >
                  <div
                    style="width: 50%; background-color: rgb(248, 248, 248)"
                  ></div>
                  <div class="elOption" @click="toSearchMember">搜索客户</div>
                </div>
                <div style="height: 30px"></div>
              </el-select>
            </div>
          </div>
          <div
            style="
              display: flex;
              flex-direction: row;
              justify-content: flex-end;
              width: 100%;
            "
          >
            <div
              style="
                display: flex;
                flex-direction: row;
                flex-wrap: wrap;
                overflow: hidden;
                height: 41px;
                justify-content: flex-end;
              "
            >
              <div class="report_header_query">
                <el-input
                  placeholder="请输入订单号"
                  v-model="query.orderSn"
                  clearable
                  style="width: 100%"
                ></el-input>
              </div>
              <div class="report_header_query">
                <el-input
                  placeholder="请输入客户电话"
                  v-model="query.memberMobile"
                  clearable
                  style="width: 100%"
                ></el-input>
              </div>
              <div class="report_header_query">
                <el-input
                  placeholder="请输入收货电话"
                  v-model="query.phone"
                  clearable
                  style="width: 100%"
                ></el-input>
              </div>
            </div>
            <el-button
              style="margin-left: 10px; margin-top: 7px; height: 100%"
              size="small"
              type="primary"
              @click="queryClick"
              >查询
            </el-button>
            <!--            隐藏显示按钮-->
            <!--            <div @click="chooseClick" style="width: 46px;height: 32px;background-color: #409EFF;margin-top: 7px;margin-left: 10px;border-radius: 4px;display: flex;justify-content: center;align-items: center;">-->
            <!--              <i style="font-size: 24px;color: white;" :class="[queryType == false?'el-icon-caret-bottom':'el-icon-caret-top']"></i>-->
            <!--            </div>-->
          </div>
        </div>
        <div
          style="width: 800px; display: flex; align-items: center"
          v-show="queryType == true"
        >
          <!--          这是放隐藏条件的容器-->
        </div>
      </div>
    </div>
    <div class="pd10">
      <el-tabs
        type="border-card"
        @tab-click="tabsClick"
        :style="{ height: curHeight + 'px' }"
      >
        <el-tab-pane label="全部">
          <div
            class="details_card"
            v-loadMore="[payLoads, 'askfor-list0']"
            :style="{ height: tabsHeight + 'px' }"
          >
            <askforList
              :orderForm="orderForm"
              @detailsClick="detailsClick"
            ></askforList>
          </div>
        </el-tab-pane>
        <el-tab-pane label="待确认">
          <div
            class="details_card"
            v-loadMore="[payLoads, 'askfor-list1']"
            :style="{ height: tabsHeight + 'px' }"
          >
            <askforList
              :orderForm="orderForm"
              @detailsClick="detailsClick"
            ></askforList>
          </div>
        </el-tab-pane>
        <!-- <el-tab-pane label="已同意">
          <div class="details_card" v-loadMore="[payLoads,'askfor-list2']" :style="{height:tabsHeight+'px'}">
            <askforList :orderForm="orderForm" @detailsClick="detailsClick"></askforList>
          </div>
        </el-tab-pane>
        <el-tab-pane label="已寄回">
          <div class="details_card" v-loadMore="[payLoads,'askfor-list3']" :style="{height:tabsHeight+'px'}">
            <askforList :orderForm="orderForm" @detailsClick="detailsClick"></askforList>
          </div>
        </el-tab-pane> -->
        <el-tab-pane label="待退款">
          <div
            class="details_card"
            v-loadMore="[payLoads, 'askfor-list4']"
            :style="{ height: tabsHeight + 'px' }"
          >
            <askforList
              :orderForm="orderForm"
              @detailsClick="detailsClick"
            ></askforList>
          </div>
        </el-tab-pane>
        <el-tab-pane label="已退款">
          <div
            class="details_card"
            v-loadMore="[payLoads, 'askfor-list5']"
            :style="{ height: tabsHeight + 'px' }"
          >
            <askforList
              :orderForm="orderForm"
              @detailsClick="detailsClick"
            ></askforList>
          </div>
        </el-tab-pane>
        <el-tab-pane label="已取消">
          <div
            class="details_card"
            v-loadMore="[payLoads, 'askfor-list6']"
            :style="{ height: tabsHeight + 'px' }"
          >
            <askforList
              :orderForm="orderForm"
              @detailsClick="detailsClick"
            ></askforList>
          </div>
        </el-tab-pane>
      </el-tabs>
    </div>
    <el-dialog
      title="双击选择客户"
      :visible.sync="memberTableVisible"
      width="950px"
      v-el-drag-dialog
      append-to-body
      :before-close="memberTableClose"
    >
      <div style="position: relative">
        <member-table
          :key="times"
          @memberDouble="memberDouble"
          @memberTableClose="memberTableClose"
        ></member-table>
      </div>
    </el-dialog>
    <el-footer class="el-footerBox">
      <pagination
        :total="total"
        :page.sync="pageNum"
        :limit.sync="pageSize"
        @pagination="loadOrder"
        style="margin-bottom: auto"
      ></pagination>
    </el-footer>
  </el-container>
</template>

<script>
import elDragDialog from "@/directive/el-drag-dialog"; // base on element-ui
import memberTable from "@/components/MemberTable/index";
import askforList from "./components/list";
import Pagination from "@/components/Pagination";
import { EventBus } from "@/api/eventBus";
import { list } from "@/api/askfor";
import loadMore from "@/utils/more.js";
import { list as memberList } from "@/api/member";
import { getInfo, list as sysMchList } from "@/api/sysMch";
import utils from "../../utils/utils.js";
export default {
  components: { askforList, Pagination, memberTable },
  name: "askfor-list",
  directives: { loadMore, elDragDialog },
  activated() {
    this.payLoads = new Date().getTime();
  },
  data() {
    return {
      pageNum: 1,
      orderForm: [],
      pageSize: 20,
      memberName: "",
      times: "",
      curHeight: null,
      tabsHeight: null,
      total: 0,
      payLoads: "",
      mchType: "",
      memberTableVisible: false,
      queryType: false,
      memberIdOptions: [],
      mchIdOptions: [],
      status: "",
      query: {
        shippingMethod: "",
        date: [],
        orderSn: "",
        memberId: "",
        memberMobile: "",
        phone: "",
      },
      keyword: {
        shippingMethod: "",
        date: [],
        orderSn: "",
        memberId: "",
        memberMobile: "",
        phone: "",
      },
      pickerOptions: {
        //时间快捷选择
        shortcuts: [
          {
            text: "昨天",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近一周",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近一个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近三个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit("pick", [start, end]);
            },
          },
        ],
      },
    };
  },
  methods: {
    loadSysmch(query) {
      sysMchList({ name: query })
        .then((res) => {
          this.mchIdOptions = res.data.data.filter((val) => {
            return val.mchType === 3 || val.mchType === 1;
          });
        })
        .catch((err) => {
          console.log(err);
        });
    },
    changeSysMch() {
      this.loadOrder();
    },
    querySysmch(query) {
      this.loadSysmch(query);
    },
    loadMch() {
      getInfo().then((res) => {
        this.mchType = res.data.mchType;
      });
    },
    memberDouble(data) {
      this.memberName = data.name;
      this.query.memberId = data.id;
      this.memberTableVisible = false;
    },
    memberTableClose() {
      this.memberTableVisible = false;
    },
    toSearchMember() {
      this.memberTableVisible = true;
    },
    loadOrder() {
      let params = new URLSearchParams();
      params.append("pageNum", this.pageNum);
      params.append("pageSize", this.pageSize);
      params.append("status", this.status);
      /* params.append('startDate', this.keyword.date.length > 0 ? this.keyword.date[0] : '');
        params.append('endDate', this.keyword.date.length > 0 ? this.keyword.date[1] : ''); */
      params.append(
        "startDate",
        this.keyword.date == null || this.keyword.date.length == 0
          ? ""
          : this.keyword.date[0]
      );
      params.append(
        "endDate",
        this.keyword.date == null || this.keyword.date.length == 0
          ? ""
          : this.keyword.date[1]
      );
      params.append("orderSn", this.keyword.orderSn);
      params.append("memberId", this.keyword.memberId);
      params.append("memberMobile", this.keyword.memberMobile);
      params.append("phone", this.keyword.phone);
      list(params).then((response) => {
        this.orderForm = response.data.data;
        this.total = response.data.total;
      });
    },
    queryMember(query) {
      // 搜索客户
      console.log(query);
      this.memberIdOptions = [];
      memberList({ name: query })
        .then((res) => {
          res.data.data.forEach((option, index) => {
            this.$set(this.memberIdOptions, index, option);
          });
        })
        .catch((err) => {
          console.log(err);
        });
    },
    selectMember(data) {
      if (!utils.isNull(data)) {
        this.memberName = data.name;
        this.query.memberId = data.id;
      } else {
        this.query.memberId = "";
      }
    },
    getMemberList() {
      // 加载客户
      memberList()
        .then((res) => {
          res.data.data.forEach((option, index) => {
            this.$set(this.memberIdOptions, index, option);
          });
        })
        .catch((err) => {
          console.log(err);
        });
    },
    queryClick() {
      this.keyword = this.query;
      this.pageNum = 1;
      this.loadOrder();
    },
    resetClick() {
      this.query.date = [];
      this.query.shippingMethod = "";
      this.memberName = "";
      this.query.orderSn = "";
      this.query.memberId = "";
      this.memberMobile = "";
      this.query.phone = "";
      this.keyword = this.query;
      this.pageNum = 1;
      this.loadOrder();
    },
    chooseClick() {
      this.queryType = !this.queryType;
      if (this.queryType == true) {
        var h =
          document.documentElement.clientHeight || document.body.clientHeight;
        this.curHeight = h - 311; //减去页面上固定高度height
        this.tabsHeight = h - 381;
      } else {
        var h =
          document.documentElement.clientHeight || document.body.clientHeight;
        this.curHeight = h - 224; //减去页面上固定高度height
        this.tabsHeight = h - 294;
      }
    },
    detailsClick(data) {
      this.$router.push({
        path: "/askfor/view",
        query: { id: data },
      });
    },
    beforeMount() {
      var _this = this;
      window.onresize = () => {
        return (() => {
          if (_this.queryType == true) {
            var h =
              document.documentElement.clientHeight ||
              document.body.clientHeight;
            _this.curHeight = h - 311; //减去页面上固定高度height
            _this.tabsHeight = h - 381;
          } else {
            var h =
              document.documentElement.clientHeight ||
              document.body.clientHeight;
            _this.curHeight = h - 224; //减去页面上固定高度height
            _this.tabsHeight = h - 294;
          }
        })();
      };
    },
    comeIn() {
      console.log("222");
      var h =
        document.documentElement.clientHeight || document.body.clientHeight;
      this.curHeight = h - 224; //减去页面上固定高度height
      this.tabsHeight = h - 294;
    },
    tabsClick(data) {
      var _this = this;
      console.log(data);
      switch (data.paneName) {
        case "0":
          console.log(data.paneName);
          _this.status = ""; // 付款状态
          break;
        case "1":
          console.log(data.paneName);
          _this.status = 0; // 付款状态
          break;
        case "2":
          _this.status = 3;
          break;
        case "3":
          _this.status = 4;
          break;

        case "4":
          _this.status = 5;
          break;

        // case '2':
        //   _this.status = 1;
        //   break;

        // case '3':
        //   _this.status = 2;
        //   break;
        // case '4':
        //   _this.status = 3;
        //   break;
        // case '5':
        //   _this.status = 4;
        //   break;
        // case '6':
        //   _this.status = 5;
        //   break;
      }
      this.loadOrder();
    },
  },
  created() {
    this.loadSysmch("");
    this.loadMch();
    this.loadOrder();
    EventBus.$on("askfor-edit", (res) => {
      // 监听状态更新
      // 更新列表数组
      this.loadOrder();
      /* for (var i = 0; i < this.orderForm.length; i++) {
          if (this.orderForm[i].id == res.id) {
            this.$set(this.orderForm, i, res)
          }
        } */
    });
  },
  mounted() {
    this.comeIn();
    this.beforeMount();
  },
};
</script>

<style scoped>
.details_card {
  overflow: auto;
  padding-left: 20px;
  padding-right: 20px;
  box-sizing: border-box;
  border: 1px solid #f2f2f2;
  border-radius: 4px;
}
.el-input__inner {
  width: 100% !important;
}
.elOption {
  background-color: #909399;
  color: white;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 50%;
  height: 40px;
}
.details_card:hover {
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
}
.app {
  background-color: rgba(248, 248, 248, 0.8);
}

/deep/ .el-header {
  padding: 10px;
  /* height: 100% !important; */
  padding-bottom: 0;
}

.report_header {
  width: 100%;
  min-height: 40px;
  box-sizing: border-box;
  background-color: rgba(248, 248, 248, 0.8);
  display: flex;
  padding-bottom: 5px;
  position: relative;
  padding-left: 5px;
  padding-right: 5px;
  flex-direction: column;
}

.report_header_left {
  width: 5px;
  height: 46px;
  background-color: #409eff;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
}

.report_header_query {
  margin-left: 10px;
  width: 180px;
  margin-top: 5px;
}

.report_header_date {
  margin-left: 10px;
  width: 250px;
  margin-top: 5px;
}
</style>
